import { FC, useState } from "react"
import DateSelector from "@/components/DateSelector"
import CheckTable from "@/components/CheckTable"
import styles from "./index.less"
import { Select } from "antd"
// import CheckTable from './components/CheckTable'
import ContrastTable from "./components/ContrastTable"

const { Option } = Select

export interface testReportInter {
  key?: string,
  dates: string
  projectName: string,
  type: string | "1",
  recordStatus: string
  testRequisitionNo: string,
  errorItemNum: string | "0",
  hospDistrictName: string
}

export interface infoListType {
  label: string, value: string, key: string
}

const checkReport: FC = () => {

  /**
   * 渲染列表
   */

  // const [reportList, setReportList] = useState<Array<testReportInter>>([]);

  let reportList: Array<testReportInter> = [
    {
      key: "1",
      dates: "20210512",
      projectName: "血液化验单",
      type: "1",
      recordStatus: "未出报告",
      testRequisitionNo: "1",
      errorItemNum: "0",
      hospDistrictName: "天河医院"
    },
    {
      key: "2",
      dates: "20210512",
      projectName: "肝功能化验单",
      type: "2",
      recordStatus: "报告异常",
      testRequisitionNo: "2",
      errorItemNum: "0",
      hospDistrictName: "黄埔医院"
    }

  ]
  let statusMap = [
    {
      label: "未出报告",
      color: "#BBBBBB",
      icon: require("@/asstes/hospitalizedInfo/report-none.png"),
    },
    {
      label: "已出报告",
      color: "#2AC592",
      icon: require("@/asstes/hospitalizedInfo/report-pass.png"),
    },
    {
      label: "报告异常",
      color: "#EB6969",
      icon: require("@/asstes/hospitalizedInfo/report-abnormal.png"),
    }
  ]


  let currentReport: testReportInter = reportList[0]


  /**
   * 渲染列表
   */

  const errorItemNum = (item: testReportInter) => {
    if (item.errorItemNum && item.errorItemNum !== "0") {
      return (
        <div className={styles.warning}>{`+${parseInt(item.errorItemNum)}`}</div>
      )
    }
  }

  const renderReport = () => {
    return (
      reportList.map((item: testReportInter, index: number) => {
        return (
          <div className={`${styles.reportItem} ${item.testRequisitionNo === currentReport.testRequisitionNo ? styles.isActive : ""} `} key={item.key}>
            <div className={styles.reportItemLeft}>
              <div className={styles.name}>{index + 1}、{item.projectName}</div>
              <div className={styles.time}>{item.dates}</div>
            </div>
            <div className={styles.reportItemRight}>
              <div className={styles.reportIcon}>
                <img className={styles.icon} src={statusMap[parseInt(item.type) - 1].icon} alt="" />
                {
                  errorItemNum(item)
                }
              </div>
              <div className={styles.result} style={{ color: statusMap[parseInt(item.type) - 1].color }}>{statusMap[parseInt(item.type) - 1].label}</div>
            </div>
          </div>
        )
      })
    )
  }



  return (
    <div className={styles.testReport}>
      <div className={styles.testReportLeft}>
        <DateSelector />
        <div className={styles.reportList}>
          <div className={styles.reportCount}>共6条记录</div>
          <div className={styles.reportItemBox}>
            {
              renderReport()
            }
          </div>
        </div>
      </div>
      <div className={styles.reportRight}>
        <div className={styles.selectBox}>
          <Select
            className={styles.selectList}
            mode="multiple"
            allowClear
            style={{ width: "200px" }}
            placeholder="请选择报告进行对比"
            defaultValue={[]}
          >
            <Option value="1">报告1</Option>
            <Option value="2">报告2</Option>
            <Option value="3">报告3</Option>
          </Select>
          <button className={styles.selectOff}>关闭</button>
        </div>
        <div className={styles.reportDetail}>
          <div className={styles.hospital}>{currentReport ? currentReport.hospDistrictName : ""}</div>
          <div className={styles.project}>{currentReport ? currentReport.projectName : ""}报告单</div>
          <div className={styles.tableList}>
            {/* <Table className={styles.reportTableItem}
              bordered
              rowKey='id'
              scroll={{ y: tableScroll ? tableScroll : 500 }}
              columns={columns}
              dataSource={data}
              pagination={false} /> */}
            <CheckTable />
            {/* <ContrastTable /> */}
          </div>
        </div>
      </div>

    </div >
  )
}

export default checkReport